<template>
  <zc-card>
    <avue-crud
      ref="crud"
      :option="option"
      :page.sync="page"
      :table-loading="loading"
      @on-load="getList"
      @row-update="rowUpdate"
      :upload-after="uploadAfter"
      @row-save="rowSave"
      @row-del="rowDel"
      @refresh-change="refreshChange"
      @search-reset="searchChange"
      @search-change="searchChange"
      v-model="form"
      :data="data"
      :permission="permission"
    >
      <template slot="img" slot-scope="scope">
        <div class="user">
          <img
            class="column-img-avatar"
            :src="scope.row.img"
            @click="$ImagePreview([{ url: scope.row.img }], 0)"
          />
          <div class="user-msg">
            <div class="namex">{{ scope.row.nickname }}</div>
            <div>{{ scope.row.mobile }}</div>
          </div>
        </div>
      </template>
      <template slot="state" slot-scope="scope">
        <el-switch
          @change="
            (e) => {
              switchChange(e, scope.row.id);
            }
          "
          v-model="scope.row.state"
          :active-value="1"
          :inactive-value="2"
          active-color="#1890ff"
          inactive-color="#DCDFE6"
        ></el-switch>
      </template>
      <template slot="is_distribution" slot-scope="scope">
        <el-switch
          @change="
            (e) => {
              switchChange2(e, scope.row.id);
            }
          "
          v-model="scope.row.is_distribution"
          :active-value="1"
          :inactive-value="2"
          active-color="#1890ff"
          inactive-color="#DCDFE6"
        ></el-switch>
      </template>
      <template slot="is_interior" slot-scope="scope">
        <el-tag v-if="scope.row.is_interior == 1">是</el-tag>
        <el-tag type="danger" v-if="scope.row.is_interior == 2">否</el-tag>
      </template>
      <template slot-scope="scope" slot="menu">
        <!-- <el-button
          :type="scope.type"
          :size="scope.size"
          @click.stop="handleEdit(scope.row, scope.index)"
          >编辑</el-button 
        > -->

        <el-button :type="scope.type" :size="scope.size">查看下级</el-button>
        <el-button
          :type="scope.type"
          :size="scope.size"
          @click.stop="handlePrice(scope.row, scope.index)"
          >变更余额</el-button
        >
        <el-button
          :type="scope.type"
          @click.stop="handleSj(scope.row, scope.index)"
          :size="scope.size"
          >变更上级</el-button
        >
        <!-- <el-button :type="scope.type" :size="scope.size">改变类型</el-button> -->
      </template>
    </avue-crud>

    <el-dialog
      title="变更余额"
      :visible.sync="box"
      v-dialogdrag
      class="avue-dialog"
      width="40%"
    >
      <avue-form ref="form" v-model="obj0" :option="option0">
        <template slot="menuForm">
          <el-button type="primary" @click="handleSubmit">提 交</el-button>
          <el-button @click="handleEmpty">取 消</el-button>
        </template>
      </avue-form>
    </el-dialog>

    <el-dialog
      title="更改上级"
      :visible.sync="box1"
      v-dialogdrag
      class="avue-dialog"
      width="40%"
    >
      <avue-form ref="form1" v-model="obj1" :option="option1">
        <template slot="menuForm">
          <el-button type="primary" @click="handleSubmit1">提 交</el-button>
          <el-button @click="handleEmpty1">取 消</el-button>
        </template>
      </avue-form>
    </el-dialog>
  </zc-card>
</template>

<script>
import { mapGetters } from "vuex";
import {
  getList,
  update,
  add,
  del,
  updateStatus,

} from "@/api/admin/user.js";
import option from "./user-options.js";
import { getToken } from "@/utils/auth";
const defaultSettings = require("../../settings.js");
export default {
  data() {
    return {
      box1: false,
      obj1: {},
      option1: {
        emptyBtn: false,
        submitBtn: false,
        column: [
          {
            label: "上级",
            prop: "p_id",
            typeslot: true,
            type: "select",
            remote: true,

            props: {
              res: "datas.data",
              label: "nickname",
              value: "id",
            },
            typeformat(item, label, value) {
              return `${value}:${item.id}-${item.nickname}`;
            },
            span: 12,
            dicUrl:
              `${
                defaultSettings.baseApi
              }/user/get_member_list?key=${getToken()}` +
              "&api_path=/user/get_member_list&name={{key}}&limit=20&page=1",
          },
        ],
      },

      currentRow: {},
      box: false,
      obj0: {},
      option0: {
        emptyBtn: false,
        submitBtn: false,
        column: [
          {
            label: "金额",
            prop: "money",
            rules: [
              {
                required: true,
                message: "请输入会员原价格",
                trigger: "blur",
              },
              {
                pattern: /^[1-9]\d*$/,
                message: "金额必须是正整数",
                trigger: "blur",
              },
            ],
          },
          {
            showColumn: false,
            span: 12,
            label: "修改类型",
            prop: "change",
            // search: true,
            type: "select",
            slot: true,
            dicData: [
              {
                label: "增加",
                value: 1,
              },
              {
                label: "减少",
                value: 2,
              },
            ],
            rules: [
              {
                required: true,
                message: "请选择状态",
                trigger: "change",
              },
            ],
          },
          {
            showColumn: false,
            label: "修改原因",
            prop: "cause",
            row: true,
            span: 24,
            type: "textarea",
            rules: [
              {
                required: true,
                message: "请输入修改原因",
                trigger: "blur",
              },
            ],
          },
        ],
      },
      permission: {
        addBtn: false,
        editBtn: false,
        delBtn: false,
        excelBtn: false,
      }, //权限
      page: {
        currentPage: 1,
        pageSize: 10,
      },
      form: {},
      params: {
          p_id:''
      },
      loading: false,
      data: [],
      option: {},
    };
  },
  created() {
    // console.log("添加", this.$route.params.id);
    this.params.p_id=  this.$route.params.id
    this.permission.addBtn = this.zcbtn.client_user_add || false;
    this.permission.editBtn = this.zcbtn.client_user_edit || false;
    this.permission.delBtn = this.zcbtn.client_user_del || false;
    this.permission.excelBtn = this.zcbtn.client_user_excel || false;
    this.option = option(this);
  },
  mounted() {
  
  },
  computed: {
    ...mapGetters(["zcbtn"]),
  },
  methods: {
    // 变更上级
    handleEmpty1() {
      this.box1 = false;
      this.$nextTick((e) => {
        this.$refs.form1.resetForm();
      });
    },
    handleSubmit1() {
      this.$refs.form1.validate((vaild, done) => {
        if (vaild) {
          editSj({ ...this.obj1, ids: this.currentRow.id }).then((res) => {
            this.getList();
            this.$message.success("修改上级成功");
            this.$refs.form1.resetForm();
            this.box1 = false;
          });
          done();
        }
      });
    },

    handleSj(row, index) {
      this.currentRow = { ...row };
      this.box1 = true;
      this.$nextTick((e) => {
        this.$refs.form1.resetForm();
      });
    },
    // 变更上级end

    // 变更余额
    handleEmpty() {
      this.box = false;
      this.$nextTick((e) => {
        this.$refs.form.resetForm();
      });
    },
    handleSubmit() {
      this.$refs.form.validate((vaild, done) => {
        if (vaild) {
          editPrice({ ...this.obj0, id: this.currentRow.id }).then((res) => {
            this.getList();
            this.$message.success("修改余额成功");
            this.$refs.form.resetForm();
            this.box = false;
          });

          done();
        }
      });
    },

    // 变更余额
    handlePrice(row, index) {
      this.currentRow = { ...row };
      this.box = true;
      this.$nextTick((e) => {
        this.$refs.form.resetForm();
      });
    },
    switchChange2(e, id) {
      if (e == 1) {
        updateStatus({ field: "is_distribution", value: 1, id }).then((res) => {
          this.$notify({
            title: "成功",
            message: "修改状态成功",
            type: "success",
          });
        });
      }
      if (e == 2) {
        updateStatus({ field: "is_distribution", value: 2, id }).then((res) => {
          this.$notify({
            title: "成功",
            message: "修改状态成功",
            type: "success",
          });
        });
      }
    },
    switchChange(e, id) {
      console.log(id);
      console.log(e);
      if (e == 1) {
        updateStatus({ field: "state", value: 1, id }).then((res) => {
          this.$notify({
            title: "成功",
            message: "修改状态成功",
            type: "success",
          });
        });
      }
      if (e == 2) {
        updateStatus({ field: "state", value: 2, id }).then((res) => {
          this.$notify({
            title: "成功",
            message: "修改状态成功",
            type: "success",
          });
        });
      }
    },
    // 自定义删除
    handleDel(row, index) {
      this.$refs.crud.rowDel(row, index);
    },
    // 自定义编辑
    handleEdit(row, index) {
      this.$refs.crud.rowEdit(row, index);
    },
    uploadAfter(res, done) {
      done();
    },
    getList() {
      this.loading = true;
      const data = Object.assign(
        {
          page: this.page.currentPage,
          limit: this.page.pageSize,
        },
        this.params
      );
      this.data = [];

    return  getList(data).then((res) => {
        // console.log("添加是j", res);
        this.loading = false;
        this.page.total = res.count_num;
        this.data = res.data;
        return Promise.resolve(true)
      });
    },
    rowSave(row, done, loading) {
  
      // return;
      add(
        Object.assign(
          {
            role_id: row.role_name,
          },
          row
        )
      )
        .then(() => {
          this.$message.success("新增成功");
          done();
          this.getList();
        })
        .catch(() => {
          loading();
        });
    },
    rowUpdate(row, index, done, loading) {
     
      let params = {
        change: row.change,
        integral: row.jfnum,
        id: row.id,
        case: row.case,
      };
    },
    rowDel(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return del(row.id);
        })
        .then(() => {
          this.$message.success("删除成功");
          this.getList();
        });
    },
    async searchChange(params, done) {
      // console.log(params);
      if (params.add_time && params.add_time.length > 0) {
        params.start_time = params.add_time[0].getTime() / 1000;
        params.end_time = params.add_time[1].getTime() / 1000;
      }

      if (done) done();
      this.params = params;
      this.page.currentPage = 1;
      await this.getList();
      this.$message.success("搜索成功");
    },
    async refreshChange() {
      await this.getList();
      this.$message.success("刷新成功");
    },
  },
};
</script>

<style lang="scss" scoped>
.column-img-avatar {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.user {
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-msg {
  margin-left: 4px;
  text-align: left;
}
.namex {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 110px;
  text-align: left;
}
</style>